<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webSocket发消息</title>
</head>
<body>
	<input type="text" id="msg" name="msg" />
	<button id="sendMsg">发送消息</button>
	<select id="sessionId">
		<option value="0">0</option>
		<option value="1">1</option>
	</select>
	
	<div id="div"></div>
	
	<script type="text/javascript">
		var div = document.getElementById("div");
		var sendMsg = document.getElementById("sendMsg");
		var message = '';
		
		// URL 书写格式和访问spring中访问controlle类似 ---> ws://ip:端口/项目名称/映射地址
		var socket = new WebSocket("ws://127.0.0.1:8084/mrzhou-fileupload/websocket");
		
		socket.onopen = function(event) {
			console.log(event);
			socket.send(message);
		}
		
		socket.onclose = function(event) {
			console.log(event);
		}
		
		socket.onerror = function(event){
		    console.log(event);
		}
		
		socket.onmessage = function(event){
		    console.log(event)
		    div.innerHTML += (event.data+"<br/>");
		}
		
		sendMsg.onclick = function() {
			getReuqest();
		}
		
		
		// 刷新页面是主动关闭webSocket同服务器端的连接
		window.onbeforeunload = function(){ 
			socket.close();
		}
		
		function getReuqest(){
			var msg = document.getElementById("msg").value;
			var sessionId = document.getElementById("sessionId").value; //获得select选中的值
			
			var httpRequest = new XMLHttpRequest();
			httpRequest.open("GET","socket/sendmessage.do?msg="+msg+"&sessionId=" + sessionId ,true);
			httpRequest.send(); // 发送请求 将请求参数写在URL中
		}
		
	</script>
	
</body>
</html>